<template>
  <!-- // 资源储备 -->
  <div style="height: 100%;display: flex;flex-direction: column;width: 100%;">
    <div class="cardTitleNew flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">资源储备</div>
      <!-- <a @click="goRouter" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right"
          color="#fff"></i></a> -->
      <SelectOptions :value="sign" :options="resourceOptions" @change="selectChange" />
    </div>
    <div class="mainBottom" id="resources">
      <el-radio-group v-model="tabPosition" class="tabs" @change="tabChange">
        <el-radio-button :label="item" v-for="item in tabsList" :key="item.props">{{ item.lable
        }}&emsp;{{ tabsNum[item.props] || 0 }}</el-radio-button>
      </el-radio-group>
      <div class="bottomArea" style="flex: 1;">
        <div v-if="showBarCharts" :style="{ width: containerWidth, height: '96%', }">
          <BarCharts :option="option" chartId="yjglsydw1" barChartsId="yjglsydw2" @barClick="barClick"></BarCharts>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getResourcesByNotId } from "@/api/EarlyWarningManagement/homepagecontent.js";
import BarCharts from "../../EmergencyResources/components/BarChartsNew.vue";
// import BarCharts from "@/components/highCharts/NewBarCharts.vue";
import SelectOptions from "@/components/selectOptions.vue";
import { resourceOptions, tabsData } from "./config";
export default {
  name: "ResourceReserve",
  components: { BarCharts, SelectOptions },
  props: ["id"],
  data() {
    return {
      sign: "1",
      resourceOptions,
      tabPosition: "",
      tabsData,
      tabsNum: {},
      tabsList: [],
      //
      showBarCharts: false,
      containerWidth: "100%",
      option: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 8, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "92%",
        bdHeight: "8%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 100,
          ch2: 30,
          ch3: 150
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 30,
          bottom: 6,
          containLabel: true
        },
        legends: [],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      car: {
        tableDataList: []
      },
      supplies: {
        tableDataList: []
      },
      equip: {
        tableDataList: []
      },
      total: 0,
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      xAxisData: []
    };
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          this.tabsList = this.tabsData[this.sign];
          this.tabPosition = this.tabsList[0];
          this.option.yAxis.name = this.tabsList[0].unit;
          this.getList();
        }
      }
    }
  },
  methods: {
    barClick(barIndex, i) {
      this.$emit("chartsDialog", this.tabPosition.props, this.id, this.sign, this.option.xAxis[0].data[barIndex * 1 - 1]);
    },
    getNum() {
      getResourcesByNotId({ name: "", noticeId: this.id, type: this.sign }).then(res => {
        if (res.strMap) {
          this.tabsNum = res.strMap;
        }
      });
    },
    // 资源储备选项卡
    async getList() {
      this.showBarCharts = false;
      const res = await getResourcesByNotId({ name: this.tabPosition.props, noticeId: this.id, type: this.sign });
      const resources = document.querySelector("#resources").offsetWidth;
      const resourcesTabs = document.querySelector("#resources .tabs").offsetWidth;
      if (resourcesTabs > resources) this.containerWidth = resourcesTabs + "px";
      if (res.mapList) {
        this.getNum();
        const xAxis = [];
        const series = [];
        res.mapList.forEach(item => {
          xAxis.push(item.name);
          series.push([item.count]);
        });
        this.option.legends = [this.tabPosition.props];
        this.option.xAxis[0].data = xAxis;
        this.option.series = series;
        if (series.length > 5) {
          this.containerWidth = 86 * series.length + "px";
        }
      } else {
        this.tabsNum = {};
        this.option.legends = [this.tabPosition.props];
        this.option.xAxis[0].data = [];
        this.option.series = [];
      }
      // this.option.legends = ["应急救援基干分队", "应急抢修队伍"];
      // this.option.xAxis[0].data = ["武汉"];
      // this.option.series = [[6, 2, 3]];
      this.showBarCharts = true;

    },
    selectChange(e) {
      this.sign = e;
      this.tabsList = this.tabsData[e];
      this.tabPosition = this.tabsList[0];
      this.tabChange(this.tabsList[0]);
    },
    tabChange(val) {
      this.option.yAxis.name = val.unit;
      this.getList();
    }
  }
};
</script>

<style scoped lang="less">
.cardTitleNew {
  background-color: rgba(38, 92, 255, 0.45);
  color: #fff;
  align-items: center;
}

.cardTitleNew a {
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}

.mainBottom {
  height: 88%;
  // padding: 0 10px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;

  .tabs {
    width: fit-content;
    display: flex;
    padding: 12px 0 12px 30px;

    /deep/.el-radio-button:first-child .el-radio-button__inner {
      border-radius: 30px 0 0 30px;
    }

    /deep/.el-radio-button:last-child .el-radio-button__inner {
      border-radius: 0 30px 30px 0;
    }

    /deep/.el-radio-button__inner {
      cursor: pointer;
      padding: 0 12px;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      background: transparent;
      border: 1px solid #0B5F9480;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      background: #409EFF;
    }


  }
}

.mainBottom::-webkit-scrollbar {
  height: 8px;
}
</style>
